class GlassZoom {
  /**
   * 初始化属性节点
   * @param {*} id
   */
  constructor(id) {
    this.root = document.querySelector(id)
    this.mask = this.root.querySelector('.mask') //遮罩层mask
    this.showBox = this.root.querySelector('.show-box') //显示图片showBox
    this.bigGlass = this.root.querySelector('.right') //放大镜bigGlass
    this.bigPicBox = this.root.querySelector('.right>img') //背景图bigpicBox
    this.lisEle = this.root.querySelectorAll('ul>li') //获取所有tab切换小图
    this.showImg = this.root.querySelector('.show-box>img') //显示图片
  }
  /**
   *
   * 计算背景图比例
   *   遮罩层mask            放大镜bigGlass
   *  ---------------   =   ------------------
   *   显示图片showbox        背景图bigPicBox
   *
   *   背景图片bigpicbox = 放大镜bigGlass*显示图片showbox/遮罩层mask
   */
  setScale() {
    this.bigPicBox.style.width =
      (this.bigGlass.offsetWidth * this.showBox.offsetWidth) /
        this.mask.offsetWidth +
      'px'
    this.bigPicBox.style.height =
      (this.bigGlass.offsetHeight * this.showBox.offsetHeight) /
        this.mask.offsetHeight +
      'px'
  }

  /**
   * 放大镜功能
   */
  moveGlass() {
    //移入显示遮罩层
    this.showBox.onmouseover = () => {
      this.mask.style.display = 'block'
      this.setScale()
    }
    //移出隐藏遮罩层
    this.showBox.onmouseout = () => {
      this.mask.style.display = 'none'
    }
    //移动遮罩层
    this.showBox.onmousemove = (e) => {
      e = e || window.event //事件对象

      let x = e.offsetX - this.mask.offsetWidth / 2
      let y = e.offsetY - this.mask.offsetHeight / 2

      if (x < 0) x = 0
      if (x > this.showBox.offsetWidth - this.mask.offsetWidth)
        x = this.showBox.offsetWidth - this.mask.offsetWidth
      if (y < 0) y = 0
      if (y > this.showBox.offsetHeight - this.mask.offsetHeight)
        y = this.showBox.offsetHeight - this.mask.offsetHeight

      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'

      /**
         遮罩层移动距离        遮罩层
         ------------   =  ------------
         背景图片移动距离      放大镜

          背景图片移动距离 =  遮罩层移动距离*放大镜/遮罩层
       **/
      let moveX = (x * this.bigGlass.offsetWidth) / this.mask.offsetWidth
      let moveY = (y * this.bigGlass.offsetHeight) / this.mask.offsetHeight

      this.bigPicBox.style.left = -moveX + 'px'
      this.bigPicBox.style.top = -moveY + 'px'
    }
  }

  /**
   * 切换放大镜图片
   *  功能:  选中小图，显示图片和背景图片切换为小图对应图片
   *        1. 给小图片绑定事件
   *            1.1 循环遍历每个小图，设置事件
   *            1.2 事件委托，给它父元素设置事件
   *        2. 选中小图设置选中样式active
   *            设置之前先清掉所有小图选中样式active
   */
  onTabGlass() {
    let _this = this
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].onmouseover = function () {
        //清掉所有小图选中样式
        _this.onClear()
        this.classList.add('active')
        _this.showImg.setAttribute('src',`./image/show_${i+1}.jpg`)
        _this.bigPicBox.setAttribute('src',`./image/big_${i+1}.jpg`)
      }
    }
  }
  onClear() {
    for (let i = 0; i < this.lisEle.length; i++) {
      this.lisEle[i].classList.remove('active')
    }
  }
}
